<template>
  <div class="pie-chart" ref="pie" style="width:60%;height:350px;"></div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import echarts from "@/utils/echarts";

const props = defineProps({
  formItem: {
    type: Object,
  }
})
const chartData = computed(()=>{return props.formItem.result.map(item=>{
    return {
      name: item.label,
      value: item.writerChoosedNum,
    }
  })
})
//饼状图配置
let myPie = ref(null)
const pie = ref(null)
const getPieOption = () => {
  return{
    color: ["#ff9700", "#2cbf77", "#4d99f2", "#73b2fb"],

    tooltip: {
      show: true,
      textStyle: {
        color: "#333333",
        fontSize: 14,
      },
      backgroundColor: "#ffffff",
      formatter(params) {
        if (params.name === "") {
          return "";
        }
        return `${params.name} : ${params.percent}%`;
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"], // 修改为居中
        avoidLabelOverlap: true,
        label: {
          color: "#333333",
          alignTo: "labelLine",
          formatter: `{name|{b}}\n{num|{c}}条 {zb|{d}}%`,
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            num: {
              fontSize: 12,
              color: "#333333",//数值颜色
            },
            zb: {
              fontSize: 12,
              color: "#333333",
            },
          },
        },
        labelLine: {
          length: 15,
          length2: 0,
          maxSurfaceAngle: 80,
        },
        data: chartData.value
      },
    ],
  }
}
onMounted(() => {
  myPie.value = echarts.init(pie.value)
  myPie.value.setOption(getPieOption())
  window.onresize = function() {
    myPie.value.resize();
  }
});
</script>
<style scoped lang='scss'>

</style>